<template>
  <div class="wares-page">
    <div class="add-ware">
      <h2>新增商品</h2>
      <ul class="ware-type">
        <li class="ware-item" v-for="item in wareType" :key="item.value" @click="clickJump(item)">{{ item.name }}</li>
      </ul>
    </div>
    <div class="wares-list">
      <h2>{{ `发布过的商品${waresList.length ? '(' + waresList.length + ')' : ''}` }}</h2>
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <div class="cell van-hairline--bottom" v-for="item in waresList" :key="item.goodsId" @click="clickHandle(item)">
          <div class="cell-image back-image" :style="{ backgroundImage: `url(${item.imageUrl.split(',')[0]})` }"></div>
          <div class="cell-info" :class="item.downShelfReason ? 'invalid' : 'valid' ">
            <p class="title ellipsis">{{ item.title }}</p>
            <span class="tag">{{ wareType.find(list => item.type === list.type ).name  }}</span>
            <p class="other">
              <span class="money" :style="{ visibility: item.money ? 'visible' : 'hidden' }">{{ item.money + wareType.find(list => item.type === list.type ).unit }}</span>
              <span class="edit" v-show="!item.downShelfReason" @click.stop="queryById(item)"><i class="iconfont icon-found_editor"></i></span>
              <span class="delete" @click.stop="removeById(item.goodsId)"><i class="iconfont icon-peixunsucai_shanchujilu"></i></span>
            </p>
          </div>
          <div class="tip" v-if="item.downShelfReason">
            <i class="iconfont icon-toast_warning"></i>{{ item.downShelfReason }}
          </div>
        </div>
      </van-list>
    </div>
  </div>
</template>

<script>
import goodService from '@/services/goodService'
const wareType = [
  { type: 2, unit: "万元", name: '二手房', value: 'secondLinker' },
  { type: 1, unit: "元/月", name: '租房', value: 'rentalLinker' },
  { type: 3, unit: "元", name: '其它', value: 'other' },
]

export default {
  data() {
    return  {
      wareType,
      loading: false,
      finished: false,
      waresList: [],
      current: 1,
      size: 10
    }
  },
  methods: {
    async onLoad() {
      let res = await goodService.selectList()
      this.waresList = this.waresList.concat(res.records)
      this.loading = false
      this.finished = this.current >= res.pages
      this.current +=1
    },
    clickHandle(item) {
      console.log(item)
      if (!item.downShelfReason) {
        let current = this.wareType.find(list => item.type === list.type)
        item.inlayObjectType = current.type
        item.advertisingImgUrl = item.imageUrl.split(",")[0]
        item.slogan = item.title
        window.sessionStorage.setItem("inlayHouse", JSON.stringify(item))
        this.$router.go(-1)
      }
    },
    async queryById(item) {
      let current = this.wareType.find(list => item.type === list.type)
      this.$router.push({ path:'/discover/addWares', query: { type: current.value, goodsId: item.goodsId } } )
    },
    async removeById(goodsId) {
      try {
        await goodService.deleteById(goodsId)
        this.$toast.success("删除成功")
        this.waresList.some((item, index) => {
          if (item.goodsId === goodsId ) {
            this.waresList.splice(index, 1)
            return true
          }
        })
      } catch (error) {
        console.log(error)
      }
    },
    clickJump(item) {
      this.$router.push(`/discover/addWares?type=${ item.value }`)
    }
  }
}
</script>

<style lang="less" scoped>

.wares-page {
  background: #F7F9FA;

  h2 {
    color: #13284D;
    font-size: 20px;
    line-height: 30px;
  }

  .ellipsis {
    overflow : hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .add-ware {
    padding: 12px 16px;
    background: #fff;
    .ware-type {
      padding: 12px 0;
      display: flex;
      align-items: center;
      .ware-item {
        flex: 1;
        width: 108px;
        height: 44px;
        font-size: 16px;
        border: 1px solid #405170;
        line-height: 44px;
        border-radius: 4px;
        line-height: 44px;
        text-align: center;
        margin-right: 10px;
        &:last-child {
          margin-right: 0px;
        }
        &:active {
          background: #eee;
        }
      }
    }
  }

  .wares-list {
    padding: 12px 16px;
    background: #fff;
    margin-top: 12px;
    .cell {
      padding: 16px 0;
      overflow: hidden;
      .back-image {
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
      }
      .cell-image {
        display: inline-block;
        width: 120px;
        height: 90px;
        border-radius: 6px;
      }
      .cell-info {
        float: right;
        width: 209px;
        margin-left: 14px;
        font-size: 0px;
        .title {
          font-size: 16px;
          line-height: 22px;
          min-height: 44px;
          margin-bottom: 4px;
        }
        .other {
          padding-top: 20px;
          display: flex;
          align-items: center;
          padding-top: 4px;
          line-height: 24px;
          .edit,.delete {
            font-size: 16px;
            padding-left: 12px;
            color: #9CA5B5;
            &:active {
              color: #007AE6;
            }
          }
        }
      }
      .valid {
        .title {
          color: #13294F;
        }
        .tag {
          background: rgba(0, 122, 230, 0.15);
          color: #007AE6;
          line-height: normal;
          padding: 0px 4px;
          font-size: 10px;
        }
        .money {
          flex: 1;
          font-size: 16px;
          color: #E02020;
        }
      }
      .invalid {
        .title {
          color: #9BA4B4;
        }
        .tag {
          background: rgba(143, 159, 177, 0.15);
          color: #8F9FB1;
          line-height: normal;
          padding: 0px 4px;
          font-size: 10px;
        }
        .money {
          flex: 1;
          font-size: 16px;
          color: #9BA4B4;
        }
        
      }
      .tip {
        font-size: 16px;
        padding-top: 12px;
        color: #EB602F;
      }
    }
  }
}

</style>